<template>
  <div id="app">
    <router-view></router-view>
    <RightMenu
      :style="{
        left: $store.state.rightMenuX + 'px',
        top: $store.state.rightMenuY + 'px',
      }"
      class="right-menu"
      :list="rightMenuList"
      :cb="rightMenuClick_fn"
      v-show="$store.state.isShowRightMenu"
    ></RightMenu>
  </div>
</template>

<script>
import socket_m from "./util/connect";
import RightMenu from "./components/RightMenu";
import rightMenu_m from "./utils";
export default {
  name: "app",
  data() {
    return {
      rightMenuList: rightMenu_m.rightMenuList,
      rightMenuClick_fn: rightMenu_m.menuClick_fn,
    };
  },
  created() {
    //在页面加载时读取sessionStorage里的状态信息
    let num = localStorage.getItem("tempGroupNum") - 0;
    let nick = localStorage.getItem("nick");
    this.$store.commit("chat/setGroupNum_fn", num);
    this.$store.commit("updateNick_fn", nick);

    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      localStorage.setItem("tempGroupNum", this.$store.state.chat.groupNum);
      localStorage.setItem("nick", this.$store.state.nick);
    });
  },
  mounted() {
    document.onclick = (e) => {
      this.$store.commit("updateRightMenuShow_fn", false);
    };
    // this.checkIsLogin_fn();
  },
  methods: {
    // 检查用户是否登录
    // checkIsLogin_fn() {
    // },
  },
  components: {
    RightMenu,
  },
};
</script>

<style>
html,
body,
#app {
  height: 100%;
  position: relative;
}

* {
  margin: 0;
  padding: 0;
  /* font-family: simsun; */
}
ul {
  list-style: none;
}
.clearfix::after {
  display: block;
  content: "";
  clear: both;
}
.bg {
  background-color: red;
}
.right-menu {
  position: absolute;
}
</style>
